<template>
  <div class="back-box" ref="backBox">
    <Bloom-menu 
      draggable="true"
      :iconImgArr="iconImgArr" 
      :startAngle="-90" 
      :endAngle="-270" 
      :itemNum="5" 
      @onClick="onClick"
      @dragstart.native="dragstart"
      @dragend.native="dragend"
      :style="`left:${elLeft}px;top:${elTop}px`"
      class="menu-left-corner-wrapper">
    </Bloom-menu>
  </div>

</template>
<script type="text/ecmascript-6">
  import './style/menuConfig.less'
  import Menu from './components/Menu.vue'
  
  function simpleDebounce(fn, delay = 100) {
    let timer = null
    return function () {
      let args = arguments
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }

  export default {
    components: {
      'BloomMenu': Menu
    },
    data() {
      return {
        size: 60,
        minDistanceX: 30, //左右距离边框的最小距离
        minDistanceY: 60, //上下距离边框的最小距离
        clientW: document.documentElement.clientWidth,//视口宽
        clientH: document.documentElement.clientHeight,//视口高
        startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
        startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
        elLeft: 0, // 元素的左偏移量
        elTop: 100, // 元素的右偏移量
      }
    },
    computed: {
      iconImgArr() {
        let tmp = []
        tmp.push(this.genarateIconObj('icon-shouye', '首页', '50', 'goRouter("/dashboard/analysis")'))
        tmp.push(this.genarateIconObj('', '日常养护', '50', 'goRouter("/operation/maintaininspect/TbDailyInspectList")'))
        tmp.push(this.genarateIconObj('', '养护工程', '50', 'goRouter("/operation/maintenanceproject/TbProjectInitiationList")'))
        tmp.push(this.genarateIconObj('', '机电养护', '50', 'goElectromechanical()'))
        tmp.push(this.genarateIconObj('', '基础数据', '50', 'goRouter("/operation/basedata/manageScopeConfig")'))
        return tmp
      }
    },
    created() {
      this.elLeft = this.clientW - this.size - this.minDistanceX
      window.addEventListener('resize', this.bindScrollEvent)
    },
    mounted() {
    },
    destroyed() {
      window.removeEventListener('resize', this.bindScrollEvent)
    },
    methods: {
      bindScrollEvent: simpleDebounce(function(){
        this.initPosition()
      }, 1000),
      // 页面初始化
      initPosition() {
        this.clientW = document.documentElement.clientWidth
        this.clientH = document.documentElement.clientHeight
        if (this.elTop > this.clientH - this.minDistanceY - this.size) {
          this.elTop = this.clientH - this.minDistanceY - this.size
        }
        if (this.elLeft > this.clientW - this.minDistanceX - this.size) {
          this.elLeft = this.clientW - this.minDistanceX - this.size
        }
      },
      // 拖拽开始事件
      dragstart(e) {
        this.startclientX = e.clientX; // 记录拖拽元素初始位置
        this.startclientY = e.clientY;
      },
      // 拖拽完成事件
      dragend(e) {
        let x = e.clientX - this.startclientX; // 计算偏移量
        let y = e.clientY - this.startclientY;
        // 贴边设计，不允许拉出视口
        let endTop = this.elTop + y // 实现拖拽元素随偏移量移动
        let endLeft = this.elLeft + x
        if (endTop < this.minDistanceY) {endTop = this.minDistanceY}
        if (endTop > this.clientH - this.minDistanceY - this.size) {endTop = this.clientH - this.minDistanceY - this.size}
        if (endLeft < this.minDistanceX) {endLeft = this.minDistanceX}
        if (endLeft > this.clientW - this.minDistanceX - this.size) {endLeft = this.clientW - this.minDistanceX - this.size}
        this.elTop = endTop
        this.elLeft = endLeft
      },
      // 分别指定图标的url ,名称， 以及background-size属性
      genarateIconObj(icon, name, size, action) {
        let tmp = {}
        tmp.icon = icon
        tmp.label = name
        tmp.size = size
        tmp.action = action
        return tmp
      },
      onClick(index) {
        let actionName = this.iconImgArr[index].action
        if (!!actionName) {
          eval(`this.${actionName}`)
        }
      },
      goElectromechanical () {
        let url = 'http://36.111.167.93:9091'
        let accessToken = JSON.parse(localStorage.getItem('pro__Access-Token'))
        if (location.href.indexOf('36.111.167.93:9091') === -1) {
          url += `?tokenKey=${accessToken.value}#/`
        }
        window.open(url, '_self')
      },
      goRouter (path) {
        let accessToken = JSON.parse(localStorage.getItem('pro__Access-Token'))
        if (!!accessToken) {
          if (this.$route.path !== path) {
            this.$router.push({
              path: path
            })
          }
        } else {
          let url = `http://36.111.189.74:3000${path}`
          window.open(url, '_self')
        }
      },
    }
  }
</script>
<style>
  @import url("font/iconfont.css");
</style>
